<template>
	<view class="page">
		<view class="container">
			<view class="card">
				<view class="card_top">
					<view class="help">
						<view class="help_con">
							<u-icon name="question-circle" color="white" size="50rpx"></u-icon>使用帮助
						</view>
					</view>
					<view class="card_topB">
						<view class="safeType">正常</view>
						<view class="name">张三</view>
						<view class="safe1">防控疫情，人人有责</view>
						<view class="safe1">请您继续做好个人保护。</view>
						<view class="date"><text class="text1">08</text>月<text class="text1">03</text>日
							<text class="text1">09</text>:<text class="text1">02</text>:<text class="text1">50</text>
						</view>
						<view class="safe2 safet">非常时期 健康第一 服从安排 共抗疫情</view>
						<view class="safe2">咨询电话：12345</view>
					</view>
				</view>
				<view class="card_bottom">
					<image class="img" src="../../static/logo.png"></image>
					<view class="datetype">
						<view class="datetype_top">张三的健康卡</view>
						<view class="datetype_bottom">更新时间：2021-08-03 09：02</view>
					</view>
				</view>
				<view class="address">
					<view class="addressLeft">居住地址</view>
					<view class="addressRight">贵州省六盘水市贵州省六盘水市贵州省六盘水市贵州省六盘水市</view>
				</view>
				<u-cell-group>
					<u-cell-item :title-style="{fontSize:'35rpx',color:'#000000',marginLeft:'-30rpx'}"  title="通行大数据行程卡" :arrow="true" arrow-direction="right"></u-cell-item>
					<u-cell-item :title-style="{fontSize:'35rpx',color:'#000000',marginLeft:'-30rpx'}" title="新冠病毒核酸检测查询" :arrow="true" arrow-direction="right"></u-cell-item>
					<u-cell-item :title-style="{fontSize:'35rpx',color:'#000000',marginLeft:'-30rpx'}" title="新冠病毒疫苗接种查询" :arrow="true" arrow-direction="right"></u-cell-item>
					<u-cell-item :title-style="{fontSize:'35rpx',color:'#000000',marginLeft:'-30rpx'}" title="新冠疫苗需求登记" :arrow="true" arrow-direction="right"></u-cell-item>
				</u-cell-group>
				<view class="msg">隐私说明</view>
				<view class="msg_con">
					本卡只适用于贵州省境内
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.page {		
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.container {
		width: 90%;
		height: 90%;
	}

	.card {
		width: 100%;
		height: 920rpx;
		margin-top: 80rpx;
		border-radius: 20rpx;

	}

	.card_top {
		width: 100%;
		height: 740rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #339933;

	}

	.card_topB {
		width: 100%;
		height: 640rpx;
	}

	.safeType,
	.safe1,
	.safe2,
	.name,
	.date {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.safeType {

		font-size: 70rpx;
	}

	.safe1 {
		margin-top: 30rpx;
		font-size: 30rpx;
		letter-spacing: 5rpx;
	}

	.name {
		font-size: 30rpx;
		letter-spacing: 5rpx;
		margin-top: 70rpx;
	}

	.safet {
		margin-top: 40rpx;
	}


	.date {
		font-size: 40rpx;
		margin-top: 120rpx;
	}

	.help {
		position: relative;
		width: 100%;
		height: 100rpx;
		color: white;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.help_con {
		display: flex;
		height: 100%;
		font-size: 30rpx;
		align-items: center;
		position: absolute;
		right: 20rpx;
	}

	.text1 {
		background-color: #00CD00;
		font-weight: bold;
	}

	.card_bottom {
		display: flex;
		align-items: center;
		width: 100%;
		height: 180rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		box-shadow: -1rpx 0 1rpx 1rpx #ebeef5,
			1rpx 0rpx 1rpx 1rpx #ebeef5,
			0rpx -1rpx 1rpx 1rpx #ebeef5;
	}

	.img {
		width: 110rpx;
		height: 110rpx;
		margin-left: 40rpx;
		border-radius: 50%;
	}

	.datetype {
		margin-left: 30rpx;
		color: black;
	}

	.datetype_top {
		font-size: 35rpx;
	}

	.datetype_bottom {
		margin-top: 15rpx;
		font-size: 25rpx;
		color: #C0C4CC;
	}
	.address{
		width: 100%;
		height: 175rpx;
		display: flex;
	}
	.addressLeft{
		margin-top: 50rpx;
		color: #C0C4CC;
		height: 175rpx;
		font-size: 30rpx;
	}
	.addressRight{
		height: 175rpx;
		margin-top: 50rpx;
		width: 68%;
		color: #C0C4CC;
		font-size: 30rpx;
		margin-left: 100rpx;
	}
	.msg{
		width: 100%;
		height: 50rpx;
		color: #2979FF;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}
	.msg_con{
		width: 100%;
		height: 50rpx;
		color: #C0C4CC;
		display: flex;
		justify-content: center;
		margin-top: 5rpx;
		margin-bottom: 50rpx;
	}
</style>
